<template>
  <div class="pop-wrap">
    <div class="pop-cover" v-show="showMask" @click="closeModal"></div>
    <div class="pop-modal" v-show="showMask">
      <div class="pop-box">
        <span class="title">{{title}}</span>
        <div class="pop-con">
          <input type="text" class="name" maxlength="5" v-model="content"/>
        </div>
        <button type="button" class="btn-box" @click="sureModal">确&nbsp;定</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: "请输入真实姓名"
      },
      value: {}
    },
    data() {
      return {
        showMask: false,
        content: ""
      }
    },
    mounted() {
      this.showMask = this.value;
    },
    methods: {
      sureModal() {
        this.showMask = false;
        this.$emit("sureModal", this.content);
      },
      closeModal() {
        this.showMask = false;
        this.$emit("closeModal");
      }
    },
    watch: {
      value(newVal) {
        this.showMask = newVal;
      },
      showMask(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assest/mixin";

  .pop-cover {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    .wh(100%, 100%);
    background: rgba(0, 0, 0, 0.5);
  }

  .pop-modal {
    position: fixed;
    z-index: 100;
    top: 3.787rem;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    .pop-box {
      display: flex;
      align-items: center;
      flex-direction: column;
      .wh(7.2rem, 5.333rem);
      background: rgba(255, 255, 255, 1);
      .border-radius(0.16rem);
      .title {
        margin-top: 0.72rem;
        margin-bottom: 0.64rem;
        .size-color-weight(0.48rem, rgba(51, 51, 51, 1), 500);
      }
      .pop-con {
        display: flex;
        align-items: center;
        .wh(6.24rem, 1.067rem);
        background: rgba(240, 243, 245, 1);
        .border-radius(0.16rem);
        margin-bottom: 0.64rem;
        .name {
          text-align: center;
          margin-left: 0.2rem;
          .wh(90%, 0.6rem);
          background: rgba(240, 243, 245, 1);
          line-height: 0.6rem;
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
      }
      .btn-box {
        .wh(6.24rem, 1.067rem);
        background: rgba(255, 143, 51, 1);
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }
</style>
